{{useCss "app-pages/css/goods_details.scss"}}
<div class="goods_details">
    {{#if !$Cache.goods_details.loading_completed}}
        <div>
            <i class="icon-spin4">数据加载中</i>
        </div>
    {{#else}}
        {{#> "goodsimgview"}}
    {{/if}}
    <div class="goodsinfo">
        <div class="titlebar">
            {{goods_detail.goods_name}}
            <div class="cb-main">
                <href to="/main.html">访问主页</href>
            </div>
        </div>
        <div class="price">
        {{#if $Cache.user.member_discount}}
            ￥{{#Fixed goods_detail.cash*(1-$Cache.user.member_discount)}}
            <span class="price-old">￥{{#Fixed goods_detail.price}}</span>
        {{#else}}
            ￥{{#Fixed goods_detail.cash}}
        {{/if}}
        {{#if goods_detail.original_price}}
        <span class="price-old">￥{{goods_detail.original_price}}</span>
        {{/if}}
        </div>
        <div class="goods-attr">
            <a class="icon-emo-happy">品质保证</a>
            <a class="icon-truck">安全运输</a>
            <a class="freight">运费：{{#Fixed goods_detail.express_price||0}}</a>
        </div>
        <div class="infobox">
            <div class="intro">
                {{goods_detail.intro||"暂无商品描述"}}
            </div>
        </div>
        <div class="saleinfo">
            <div class="item">库存：{{#if goods_detail.num==0}}缺货{{#else}}{{goods_detail.num}}{{/if}}</div>
            <div class="item">人气：{{$Cache.goods_details.hot_num}}</div>
        </div>
    </div>
    <!-- <div class="goods-menu">
        <a class="icon-picture" event-click=></a>
        <a class="icon-comment" event-click=></a>
    </div> -->
    <div class="typetitle">商品详情</div>
    <div class="content">
        {{#if goods_detail.detail_content}}
        {{HTML goods_detail.detail_content}}
        {{#else}}
        <p>暂无商品详情</p>
        {{/if}}
    </div>
    <div class="sharebox">
        <div class="share">
            分享到：
            <div class="i icon-weibo" event-click="{{'$Event.goods_details.shareToWeibo'}}"></div>
            <div class="i icon-qq" event-click="{{'$Event.goods_details.shareQzone'}}"></div>
        </div>
        <div class="share">
            <p>分享商品二维码，将好东西告诉更多的朋友</p>
            <img bind-src="{{$Cache.goods_details.qrcode_data}}">
            <jqrcode
                text="{{bus_info.info.domain_url}}/goods_details.html?id={{goods_detail._id}}"
                ec-level="H"
                size="300"
                radius="20"
                bind-input="{{'$Cache.goods_details.qrcode_data'}}"
                style="display:none"
            ></jqrcode>
        </div>
    </div>

    <div class="typetitle">商品评论</div>
    <div class="comments_box">
        {{#if goods_detail.evaluations.length}}
            {{#each goods_detail.evaluations}}
            <div class="comment">
                <div class="comment_title">
                    <div class="item">{{comment.commenter_info.name||"匿名"}}</div>
                    <div class="time">{{#Time comment.create_time,"YYYY-MM-DD hh:mm:ss"}}</div>
                </div>
                <div class="comment_detail">
                    <div class="main_comment">
                        {{star_num}}星：{{comment.content}}
                    </div>
                    {{#if comment.comments.length}}
                    <div class="comment_child_box">
                        {{#each comment.comments}}
                        <div class="comment_child">
                            <div class="comment_child_title">
                                <div class="item {{type=='bus'&&'focus'}}">{{commenter_info.name}}</div>
                                <div class="time">{{#Time create_time,"YYYY-MM-DD hh:mm:ss"}}</div>                    
                            </div>
                            <div class="comment_child_text">
                                {{content}}
                            </div>
                        </div>
                        {{/each}}
                    </div>
                    {{/if}}
                </div>
            </div>
            {{/each}}
        {{#else}}
        <p>暂无商品评论</p>
        {{/if}}
    </div>

    <div class="bottomblock"></div>
    <div class="floatbtnbox">
        <div class="icon-{{$Cache.page_index&&'left-open-big'||'home'}}" event-click="{{'$Event.goods_details.detailGoBack'}}"></div>
        <a  event-click="{{'$Event.goods_details.goods.collect_toggle'}}" class="{{$Cache.goods_details.is_collect&&'icon-heart'||'icon-heart-empty'}}"></a>
        <a class="icon-basket" event-click="{{'$Event.goods_details.goods.add_to_cart'}}">
        {{#if goods_detail.num }}
            加入购物车
        {{#else}}
            暂时缺货
        {{/if}}
        </a>
    </div>
</div>


<xmp type="template" name="goodsimgview">
    <div class="goodsimg">
        <div class="bigbox">
            <div class="movebox" id="movebox">
                {{#each goods_detail.detail_img_urls}}
                <img class="bigimg" data="{{$Index}}" bind-src="{{$This}}?imageView/1/w/700/h/700/q/98" />
                {{/each}} 
            </div>
        </div>
        <div class="smallbox">
            {{#if goods_detail.detail_img_urls.length}} {{#each goods_detail.detail_img_urls }}
            <div class="smallitem">
            <img name="{{$Index}}" class="smallimg" bind-src="{{$This}}?imageView/1/h/100/w/100" />
            </div>
            {{/each}} {{#else}}此商品卖家没有上传图片{{/if}}
        </div>
    </div>
    <script type="text/vm">
        function(vm) {
            var movebox = vm.queryElement({
                className: "movebox"
            })[0];
            var smallbox = vm.queryElement({
                className: "smallbox"
            })[0];
            var $movebox = $(movebox);
            var $smallbox = $(smallbox);
            $smallbox.on("click", "img", function() {
                var w = $movebox.width();
                var $this=$(this);
                var _w=$this.width();
                var _h=$this.height();
                $movebox.stop().animate({
                    marginLeft: -w * $this.attr('name')
                }, 150);
                document.body.scrollTop=0;
            });
        }
    </script>
</xmp>